<template>
  <div class="people">
    <el-button type="primary" plain @click="addActive">添加活动</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="活动封面" prop="imgUrl">
        <template #default="scope">
          <el-avatar :src="scope.row.imgUrl" />
        </template>
      </el-table-column>
      <el-table-column label="活动名称" prop="activeName" />
      <el-table-column label="活动地点" prop="location" />
      <el-table-column label="活动开始时间" prop="startTime" width="120px">
        <template #default="scope">
          {{ timestampToTime(scope.row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column label="活动结束时间" prop="endTime" width="120px">
        <template #default="scope">
          {{ timestampToTime(scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column label="男生价格" prop="manMoney">
        <template #default="scope"> {{ scope.row.manMoney }}¥</template>
      </el-table-column>
      <el-table-column label="女生价格" prop="womanMoney">
        <template #default="scope"> {{ scope.row.womanMoney }}¥ </template>
      </el-table-column>
      <el-table-column label="电话" prop="mobilePhone" />
      <el-table-column label="活动内容" prop="details">
        <template #default="scope">
          <button @click="watchMsg(scope.row.details)">点击查看</button>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="请输入搜索内容"
            @keyup="searchFun"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改信息</el-button
          >
          <el-button
            class="delA"
            type="warning"
            plain
            @click="delActives(scope.$index, scope.row)"
            >删除活动</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="abcd"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :small="true"
      :disabled="false"
      layout="prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog v-model="dialogVisible" title="活动内容" width="30%">
      <template #default>
        <textarea v-model="str" name="" id="msg" cols="30" rows="10"></textarea>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getActive, changeActive, delActive } from "@/require/index.js";
import { useRouter } from "vue-router";
import { adminInfo } from "@/store/admin.js";
import { timestampToTime } from "@/hooks/time.js";
const router = useRouter();
let store = adminInfo();
//模糊查询字段
let search = ref("");
//表格渲染数据
let tableData = ref([]);
//获取总共数据
let total = ref(0);
//修改信息弹窗判断
let dialogVisible = ref(false);

//分页数据
let currentPage = ref(1);
let pageSize = ref(8);

// 修改对象数组id
let cid = 0;

let str = ref("");

//修改信息对象
let checkMsg = ref({});
let { data } = await getActive({
  pageNum: currentPage.value,
  pageSize: pageSize.value,
  activeName: "",
});
tableData.value = data.data.records;
total = data.data.total;
// 上传图片回掉
const handleAvatarSuccess = (value) => {
  checkMsg.value.avatarUrl = value;
};
//表格操作模块
//修改用户信息
const handleEdit = (index, row) => {
  checkMsg.value = JSON.parse(JSON.stringify(row));
  checkMsg.value.uid = checkMsg.value.id;
  // dialogVisible.value = true;
  cid = index;
  router.push({
    path: "/home/changePage",
  });
  store.activeInfo = checkMsg.value;
};
// 分页页数改变
const handleCurrentChange = async (value) => {
  currentPage.value = value;
  let { data } = await getAllPeople({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    username: "",
  });
  tableData.value = data.data.records;
  total = data.data.total;
};
const handleSizeChange = () => {};
// 提交用户修改数据
const submitMsg = async () => {
  let { data } = await changeAdmin({
    ...checkMsg.value,
  });
  console.log(data);
  if (data.code == "200") {
    console.log(tableData.value[cid]);
    tableData.value[cid] = { ...checkMsg.value };
  }
};

// 防抖函数
function debounce(fn) {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, 1000);
  };
}
const check = async () => {
  let { data } = await getActive({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    activeName: search.value,
  });
  tableData.value = data.data.records;
  total = data.data.total;
};
let asd = debounce(check);
let arr = [8, 37, 39, 20];
// 搜索用户
const searchFun = (e) => {
  if (arr.indexOf(e.keyCode) == -1) {
    asd();
  }
};

// 删除用户
const delActives = async (a, b) => {
  let { data } = await delActive([b.id]);
  if (data.code == "200") {
    tableData.value.splice(a, 1);
  }
};

//添加活动
const addActive = () => {
  let obj = tableData.value[0];
  for (let value in obj) {
    obj[value] = "";
  }
  delete obj.id;
  store.activeInfo = obj;
  router.push({
    path: "/home/changePage",
  });
};

const watchMsg = (s) => {
  dialogVisible.value = true;
  str.value = s;
};
</script>

<style lang="less" scoped>
.people {
  width: 100%;
  height: calc(100vh - 105px);
}

.abcd {
  position: absolute;
  left: 50%;
  bottom: 10px;
  // transform: translateX(-50%);
}

.head {
  .img {
    width: 200px;
    height: 50px;
    display: inline-block;
    // border-radius: 50%;
    // overflow: hidden;

    img {
      width: 100%;
    }
  }
}

.msg {
  border: none;
  outline: none;
}

.changeMsg {
  p {
    height: 30px;
    line-height: 30px;
    span {
      display: inline-block;
      height: 100%;
      line-height: 30px;
      font-weight: 600;
    }
  }
  .head {
    height: 60px;

    margin-bottom: 30px;
  }
}

.el-upload {
  width: 100px;
}
.avatar-uploader {
  margin-left: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  // overflow: hidden;
  .avatar-uploader-icon {
    // margin: 0 20px;
    margin-left: 20px;
    // width: 50px;
    font-size: 50px;
    height: 50px;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

.delA {
  // width: 60px;
  padding: 5px 11px;
  height: 24px;
  font-size: 12px;
}

#msg {
  border: none;
}
</style>
